<template>
  <div>
    <van-nav-bar
      :title="msg"
      left-text="返回"
      right-text="清空购物车"
      left-arrow
      @click-left="goBack"
      @click-right="clearCartFn"
    />
    <div class="goodsDiv" v-for="item in shopCartList">
      <label> <img :src="item._img" /> </label>
      <h2>
        {{ item._goodsName }} ， 数量 {{ item._num }}，单价{{ item._price }}
      </h2>
      <!-- async-change=true必须是异步，否则将计算点击之前的值 -->
      <van-stepper
        v-model="item['_num']"
        :async-change="true"
        @plus="addBtnFn"
        @minus="minusBtnFn"
      />
    </div>
    <van-submit-bar
      :price="goodsBill * 100"
      :button-text="submitTxt"
      tip-icon="info-o"
      @submit="onSubmit"
    />
    <h1 v-if="isCartEmpty">当前购物车为空，请添加商品</h1>
  </div>
</template>
<script>
import axios from "axios";
import API_LIST from "@/APIList.config";
import { mapGetters, mapActions } from "vuex";
export default {
  name: "cart",
  data() {
    return {
      msg: "购物车",
      cartArr: "",
      goodsCnt: 0,
      goodsBill: 0,
      submitTxt: "",
      isCartEmpty: false,
    };
  },
  created() {
    this.cartArr = localStorage.cartDataInfo
      ? JSON.parse(localStorage.cartDataInfo)
      : [];
    if (this.cartArr.length === 0) {
      this.isCartEmpty = true;
    }
    this.computeAllgoodsCnt();
    this.computeGoodsBill();

    this.addToVuex(this.cartArr);
  },
  computed: {
    ...mapGetters(['shopCartList'])
  },
  methods: {
    ...mapActions(['addToVuex']),
    goBack() {
      this.$router.push({ path: "/" }, () => {
        localStorage.setItem("inxState", 0);
      });
    },
    addBtnFn() {
      this.computeAllgoodsCnt();
      this.computeGoodsBill();
    },
    minusBtnFn() {
      this.computeAllgoodsCnt();
      this.computeGoodsBill();
    },
    onSubmit() {
      this.$dialog
        .alert({
          message:
            "共" + this.goodsCnt + "个商品，总计:" + this.goodsBill + "元",
        })
        .then(() => {
          this.$toast.success("支付成功");
        });
    },
    computeAllgoodsCnt() {
      this.goodsCnt = 0;
      for (let i = 0; i < this.cartArr.length; i++) {
        this.goodsCnt += this.cartArr[i]._num;
      }
      this.submitTxt = "去结账" + "(" + this.goodsCnt + ")";
    },
    computeGoodsBill() {
      this.goodsBill = 0;
      for (let i = 0; i < this.cartArr.length; i++) {
        this.goodsBill += this.cartArr[i]._num * this.cartArr[i]._price;
      }
    },
    clearCartFn() {
      this.cartArr = localStorage.removeItem("cartDataInfo");
      this.submitTxt = "去结账(0)";
      this.goodsCnt = 0;
      this.goodsBill = 0;
      this.isCartEmpty = true;
    },
  },
};
</script>
<style scoped>
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
h2.title {
  font-size: 20px;
  text-align: center;
}
.cle:after {
  content: ".";
  overflow: hidden;
  visibility: hidden;
  height: 0;
  display: block;
  clear: both;
}
.goodsDiv {
  width: 95%;
  margin: 5px auto;
  clear: both;
}
.goodsDiv label {
  float: left;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 10px;
}
.goodsDiv label img {
  width: 100px;
  height: 100px;
}
.goodsDiv h2 {
  font-size: 22px;
}
</style>